<template>
	<div class="left-container">
		<div class="tabs-group">
			<div class="tabs-item" :class="{ active: tabsCurrent == index }" v-for="(item, index) in tabsList"
				@click="tabsClick(index)">{{ item.label }}</div>
		</div>
		<key-roads v-if="tabsCurrent === 0 && !is_ctdd_show" :is_ctdd_show="is_ctdd_show" @tableSelect="tableSelect"
			@tags-click="tagsClick" v-loading="roadsLoading" />
		<key-area v-else-if="is_ctdd_show ? tabsCurrent == 0 : tabsCurrent == 1" :is_ctdd_show="is_ctdd_show"
			@tableSelect="tableSelect" @tags-click="tagsClick" @query-date="queryDate" v-loading="roadsLoading" />
		<road-config v-else-if="tabsCurrent == 2" @tableSelect="tableSelect" v-loading="roadsLoading" />
		<area-config v-else v-loading="roadsLoading" />

	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		onMounted,
		nextTick,
		emits
	} from 'vue';
	import leftChart from './leftChart.vue'
	import keyRoads from './keyRoads' //重点道路
	import keyArea from './keyArea' //重点片区
	import roadConfig from './roadConfig' //道路配置
	import areaConfig from './areaConfig' //片区配置
	import {
		useMapStore
	} from '@/store/modules/map';

	export default defineComponent({
		name: 'TomateIndex',
		components: {
			leftChart,
			keyRoads,
			keyArea,
			roadConfig,
			areaConfig,
		},
		emits: ['tabs-click', "query-date"],
		props: {
			is_ctdd_show: false,
			tabsList: {
				type: Array,
				default: () => {
					return [{
							label: '重点道路',
						},
						{
							label: '重点片区',
						},
						{
							label: '道路配置',
						},
						{
							label: '片区配置',
						},
					]
				}
			}
		},
		setup(props, {
			emit
		}) {
			const userStore = useMapStore();

			const state = reactive({
				map: computed(() => userStore.ownMap),

				loading: false,
				chartPannelExpanded: false,
				roadsLoading: false,
				tabsCurrent: 0,
				roadForm: {},
			});

			// 表格点击
			const tableSelect = (currentRow, queryForm, type) => {
				state.roadForm = {
					roadId: currentRow.roadId || '',
					startDate: queryForm.time[0].split(' ')[0],
					endDate: queryForm.time[1].split(' ')[0],
					type: queryForm.period,
					roadName: currentRow.roadName
				};
				emit('tabs-click', true, state.roadForm)
			};
			const tabsClick = (index) => {
				if (index !== state.tabsCurrent) {
					emit('tabs-click', false)
				}
				state.tabsCurrent = index;
			};
			const tagsClick = (query) => {
				emit('tabs-click', query, )
			}
			const queryDate = (date) => {
				// console.log("date====>111",date);
				emit('query-date', date)
			}
			return {
				...toRefs(state),
				tableSelect,
				tabsClick,
				tagsClick,
				queryDate,
			};
		},
	});
</script>

<style lang="less" scoped>
	.search-box {
		position: absolute;
		z-index: 4;
		width: 100%;
		left: 0;
		top: 1%;
		padding: 0 30px;

		display: flex;
		align-items: center;
	}

	:deep .el-input__wrapper {
		background: transparent !important;
		color: white;
	}

	:deep .el-input__wrapper {
		background-color: #ffffff00;
		box-shadow: 0px 0px 0px;
	}

	:deep .el-select {
		--el-select-border-color-hover: none;
		--el-select-input-focus-border-color: none;
	}

	.el-range-separator {
		color: #ffffffff;
	}

	:deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
		background-color: #ffffff00;
		border-color: #ffffff00;
		border: none;
	}

	:deep .ant-select-selection-item {
		color: white;
	}

	.left-container {
		position: absolute;
		z-index: 4;
		left: 1.5625vw;
		top: 4%;
		background-color: rgba(0, 0, 0, 0.8);
		padding: 1vw;
		height: 94%;

		.tabs-group {
			display: flex;

			.tabs-item {
				width: auto;
				padding: 0 10px;
				height: 2.2395vw;
				line-height: 2.2395vw;
				background: rgba(255, 255, 255, 0);
				border: 1px solid #aeb4ba;
				box-shadow: 0px 5px 0px 0px rgba(224, 238, 253, 0.3);
				border-radius: 8px 0px 8px 0px;
				color: #ffffff;
				margin-right: 1vw;
				text-align: center;
				cursor: pointer;
			}

			.tabs-item.active {
				border: 1px solid #037bff;
				background: #037bff;
			}
		}
	}
</style>